<template>
  <!-- 设置饿了么ui加载数据的动画Loading 加载 默认设置为false 当数据开始的时候 加载动画 -->
  <div v-loading="loading" class="department-container">
    <el-card class="tree-card">
      <!-- ------------------------------树形菜单的标题 -->
      <!-- 这里进行了拆分 动态传递数据给子组件 子组件接收后 在模板中设置 渲染到页面上 -->
      <TreeTools :node-data="titleDate" @on-success="onSuccess" @add-dept="addDept" />

      <!-- ------------------------------树形菜单的内容(作用域插槽) -->
      <!-- 用了一个行列布局 -->
      <!-- 饿了么ui组件提供 作为作用域插槽的子组件 -->
      <!-- departs是所有的数据 data()中的数据 -->
      <el-tree :data="departs" :props="defaultProps">
        <!-- 中间的代码就是插槽内容，用于定制每一行的布局效果 -->
        <!-- 接饿了么ui提供的 Tree 树形控件的子组件 把数据进行修改(作用域插槽父组件) -->
        <!-- scope 获取了 :data="departs" 其中的一条数据 进行修改 -->
        <template v-slot="scope">
          <!-- 接收子组件传来的数据 @来接收子组件传来删除成功 -->
          <TreeTools :node-data="scope.data" @on-success="onSuccess" @add-dept="addDept" @edit-dept="editDept" />
        </template>
      </el-tree>
    </el-card>
    <!-- --------------------------------------添加部门的弹窗组件 动态绑定true false 让其实现显示隐藏 -->
    <!-- 这里用到了父传子 子传父 可以简写为 sync update 实现父传子 同时也可以接收子传父 -->
    <add :is-show-dept.sync="isShowDept" :dept-id="classId" :all-id="dlist" @on-success="onSuccess" />
    <!-- -------------------------------------------添加编辑弹窗的组件 -->
    <EditDept :is-show-dept-edit.sync="isShowDeptEdit" :dept-id="currentDeptId" :all-id="dlist" @on-success="onSuccess" />
  </div>
</template>

<script>
// 导入添加部门的组件
import add from '../../components/AddDept.vue'
// 导入编辑部门的组件
import EditDept from '../../components/EditDept.vue'
import TreeTools from './TreeTools'
// 导入获取阻止架构的api接口
import { reqGetDepartments } from '../../api/departments'
// 导入封装的递归函数
import { translateData } from '../../utils/index'
export default {
  name: 'Departments',
  components: {
    TreeTools,
    add,
    EditDept
  },
  data () {
    return {
      // 设置加载动画 默认设置为false 关闭动画 加载数据时候设置为true
      loading: false,
      // 储存所有部门的信息
      dlist: [],
      // 储存要添加在那个部门的id (-1是没有默认值)
      classId: -1,
      currentDeptId: -1,
      // 控制添加部门的弹窗效果 默认隐藏
      isShowDept: false,
      // 控制编辑弹窗效果 默认隐藏
      isShowDeptEdit: false,
      // 添加一级部门
      titleDate: {
        name: '',
        manager: '负责人',
        root: true,
        // 一级部门的父id设置为空 接收 子组件传来的一级部门的父id
        id: ''
      },
      // 组织架构的所有列表数据 二级部门 三级部门等
      departs: [], // departs来储存 组织架构的数据
      defaultProps: {
        label: 'name',
        children: 'children'
      }
    }
  },
  created () {
    // 获取服务器返回的数据(后端返回的组织架构数据)
    this.loadDepartList()
  },
  methods: {
    editDept (nodeData) {
      // 点击编辑按钮，显示编辑弹窗
      this.currentDeptId = nodeData
      this.isShowDeptEdit = true
    },
    onClose () {
      // 设置添加部门弹窗关闭
      this.isShowDept = false
    },
    // 接收子组件传来的数据(点击的部门id) 并且控制添加部门的弹窗的显示与隐藏
    addDept (id) {
      this.classId = id
      // 设置添加部门弹窗的显示
      this.isShowDept = true
    },
    async loadDepartList () {
      // 调用接口获取组织架构的数据
      try {
        // 获取数据之前 开启加载动画
        this.loading = true
        const ret = await reqGetDepartments()
        this.titleDate.name = ret.data.companyName
        // 储存所有部门的id信息
        this.dlist = ret.data.depts
        this.departs = translateData(ret.data.depts, '')
        console.log(this.departs)
        // 获取数据结束的时候 关闭加载动画
        this.loading = false
      } catch {
        // 获取数据失败 提示用户(饿了么ui组件提供)
        this.$message.error('获取组织架构数据失败')
        // 获取数据失败 把加载动画 设置为false 关闭加载动画
        this.loading = false
      }
    },
    // 子组件传来删除成功 重新调用数据获取方法
    onSuccess () {
      // 获取服务器返回的数据(后端返回的组织架构数据)
      this.loadDepartList()
    }
  }
}
</script>

<style lang="scss" scoped>
.tree-card {
  padding: 30px 30px;
  font-size: 14px;
}
</style>
